<template>
  <el-container class="h-10 w-10">
    <el-header
      v-show="fullSpcan"
      class="flex-0"
      style="height: 70px;  background-color: rgb(64, 158, 255);"
    >
      <top></top>
    </el-header>

    <el-main class="p-0 flex-1 d-flex jc-start">
      <el-container style="height: 100%; border: 1px solid #eee; ">
        <el-menu
          :unique-opened="true"
          class="el-menu-vertical-demo d-r"
          :collapse="isCollapse"
          :default-active="$route.path"
          @mouseover.native="mouseEnter"
          @mouseout.native="mouseLeave"
        >
          <el-submenu index="1">
            <template slot="title" class="text-left">
              <i class="el-icon-menu"></i>
              <span slot="title">信息管理</span>
            </template>
            <el-menu-item-group>
              <router-link tag="div" to="/info/basic" class="text-left">
                <el-menu-item index="/info/basic">行政村基本信息</el-menu-item>
              </router-link>
              <router-link tag="div" to="/info/group" class="text-left">
                <el-menu-item index="/info/group">行政村组信息</el-menu-item>
              </router-link>
              <!-- <router-link tag="div" to="/info/house" class="text-left">
                <el-menu-item index="/info/house">行政村户信息</el-menu-item>
              </router-link>-->
              <!-- <router-link tag="div" to="/info/job" class="text-left">
                <el-menu-item index="/info/job">行政村职务信息</el-menu-item>
              </router-link>-->
              <router-link tag="div" to="/info/subsidy-type" class="text-left">
                <el-menu-item index="/info/subsidy-type">行政村补助项信息</el-menu-item>
              </router-link>
              <router-link tag="div" to="/info/subsidy-info" class="text-left">
                <el-menu-item index="/info/subsidy-info">行政村补助信息</el-menu-item>
              </router-link>
              <router-link tag="div" to="/info/village" class="text-left">
                <el-menu-item index="/info/village">用户信息</el-menu-item>
              </router-link>
              <router-link tag="div" to="/info/cadre" class="text-left">
                <el-menu-item index="/info/cadre">村干部信息</el-menu-item>
              </router-link>
              <!-- <router-link tag="div" to="/info/party" class="text-left">
                <el-menu-item index="/info/party">党员信息</el-menu-item>
              </router-link>-->
              <router-link tag="div" to="/info/org" class="text-left">
                <el-menu-item index="/info/org">党员发展</el-menu-item>
              </router-link>
              <router-link tag="div" to="/info/account" class="text-left">
                <el-menu-item index="/info/account">户口迁移</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu iconfont icon-money"></i>
              <span slot="title">三资管理</span>
            </template>
            <el-menu-item-group is="ul">
              <router-link tag="div" to="/caption/resource" class="text-left">
                <el-menu-item index="/caption/resource">资源</el-menu-item>
              </router-link>
              <router-link tag="div" to="/caption/assets" class="text-left">
                <el-menu-item index="/caption/assets">资产</el-menu-item>
              </router-link>
              <router-link tag="div" to="/caption/funds" class="text-left">
                <el-menu-item index="/caption/funds">资金</el-menu-item>
              </router-link>
              <router-link tag="div" to="/caption/construction" class="text-left">
                <el-menu-item index="/caption/construction">项目建设信息</el-menu-item>
              </router-link>
              <!-- <router-link tag="div" to="/caption/finan" class="text-left">
                <el-menu-item index="/caption/finan">资金理财</el-menu-item>
              </router-link>-->
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-date"></i>
              <span slot="title">发布管理</span>
            </template>
            <el-menu-item-group>
              <!-- <router-link tag="div" to="/release/policy" class="text-left">
                <el-menu-item index="/release/policy">党规党纪</el-menu-item>
              </router-link>-->
              <router-link tag="div" to="/release/legal" class="text-left">
                <el-menu-item index="/release/legal">学习园地</el-menu-item>
              </router-link>
              <router-link tag="div" to="/release/announ" class="text-left">
                <el-menu-item index="/release/announ">村告栏</el-menu-item>
              </router-link>
              <router-link tag="div" to="/release/meeting" class="text-left">
                <el-menu-item index="/release/meeting">行政村会议</el-menu-item>
              </router-link>
              <!-- <router-link tag="div" to="/release/edu" class="text-left">
                <el-menu-item index="/release/edu">教育资讯</el-menu-item>
              </router-link>-->
              <router-link tag="div" to="/release/org-act" class="text-left">
                <el-menu-item index="/release/org-act">党组织活动</el-menu-item>
              </router-link>
              <router-link tag="div" to="/release/act" class="text-left">
                <el-menu-item index="/release/act">村组织活动</el-menu-item>
              </router-link>
              <!-- <router-link tag="div" to="/release/plan" class="text-left">
                <el-menu-item index="/release/plan">村内发展规划</el-menu-item>
              </router-link>-->
            </el-menu-item-group>
          </el-submenu>
          <router-link
            tag="div"
            to="/admin"
            class="text-left"
            v-if="(admin.mType == 2) || (admin.mType == 3)"
          >
            <el-menu-item index="/admin">
              <i class="el-icon-user"></i>
              <span slot="title">管理员管理</span>
            </el-menu-item>
          </router-link>
          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-warning"></i>
              <span slot="title">群众意见建议处理</span>
            </template>
            <el-menu-item-group>
              <router-link tag="div" to="/feedback/to-processed" class="text-left">
                <el-menu-item index="/feedback/to-processed">待处理群众意见建议</el-menu-item>
              </router-link>
              <router-link tag="div" to="/feedback/processed" class="text-left">
                <el-menu-item index="/feedback/processed">已处理群众意见建议</el-menu-item>
              </router-link>
              <router-link
                tag="div"
                to="/feedback/upward"
                class="text-left"
                v-if="admin.mType == 2"
              >
                <el-menu-item index="/feedback/upward">向上群众意见建议记录</el-menu-item>
              </router-link>
            </el-menu-item-group>
          </el-submenu>
          <router-link
            tag="div"
            to="/log"
            class="text-left"
            v-if="(admin.mType == 2) || (admin.mType == 3)"
          >
            <el-menu-item index="/log">
              <i class="el-icon-time"></i>
              <span slot="title">系统日志</span>
            </el-menu-item>
          </router-link>
          <div class="d-a btn-fold" v-show="hover">
            <el-button
              style="width: 5px; height: 50px;"
              plain
              :icon="isCollapse ? 'el-icon-d-arrow-right' : 'el-icon-d-arrow-left'"
              @click="fold"
            ></el-button>
          </div>
        </el-menu>
        <!-- <el-scrollbar class="clear-scrollbar-x"> -->
          <el-container class="flex-1" style="height: 100%;">
            <router-view @changeSpcan="changeSpcan" />
          </el-container>
        <!-- </el-scrollbar> -->
      </el-container>
    </el-main>
    <el-footer
      v-show="fullSpcan"
      style="height: 30px; line-height: 30px; font-size: 14px; background-color: rgb(64, 158, 255); color: rgb(64, 158, 255);"
      class="flex-0 text-right"
    >技术支持：河南省磐石科技有限公司</el-footer>
  </el-container>
</template>

<script>
// @ is an alias to /src
import Top from "./Top.vue";
export default {
  name: "home",
  components: {
    Top
  },
  data() {
    return {
      isCollapse: false,
      hover: false,
      fullSpcan: true,
      admin: {}
    };
  },
  methods: {
    fold() {
      this.isCollapse = !this.isCollapse;
    },
    mouseEnter() {
      this.hover = true;
    },
    mouseLeave() {
      this.hover = false;
    },
    changeSpcan() {
      this.fullSpcan = !this.fullSpcan;
    }
  },
  created() {
    this.admin = this.$util.handleLocalStorage("get", "admin");
  }
};
</script>

<style lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.btn-fold {
  right: -1rem;
  top: 50%;
  z-index: 999;
}
</style>
